<template>
	<div class="zh-video-review-multi">
		<nav-header>
			<div class="zh-h5-nav">
                <div @click="changePanel">平台录制文件列表</div>
                <div @click="changePanel('multi')">设备录制文件列表</div>
                <div class="active" >流媒体录制文件列表</div>
            </div>
		</nav-header>
		
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
                    <div class="open-width">
						<el-select v-model="recorder_id" filterable placeholder="请选择录播主机">
							<el-option
								v-for="item in recorderList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
					<div class="open-width">
						<el-input v-model="keyword" placeholder="请输入视频名搜索" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr">
					<el-button type="danger" @click="deleteMuiltVideo_confirm">批量删除</el-button>
				</div>
			</div>
			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt">
				<el-table
				    :data="listData"
				    border
				    @selection-change="tableSelectionChange"
				    max-height="650"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
				      width="50"
				      align="center"
				      fixed>
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="视频名	"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="主讲人"
				      align="center">
				      	<template slot-scope="scope">
				      		<el-select v-model="scope.row.approveData.teacher_id"  filterable placeholder="请选择主讲人">
					        	<el-option
    						      v-for="item in teacherData"
    						      :key="item.id"
    						      :label="item.name"
    						      :value="item.id">
    						    </el-option>
					      	</el-select>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      prop="4"
				      label="视频分类"
				      align="center"
				      width="220">
				      	<template slot-scope="scope">
				      		<el-cascader
							  placeholder="请选择组织架构"
							  :options="orgData"
							  separator="->"
							  :props="orgDataProps"
							  v-model="scope.row.orgGroup">
                            </el-cascader>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      prop="4"
				      label="视频信息"
				      align="center">
				      	<template slot-scope="scope">
				      		<el-select v-model="scope.row.approveData.is_nice" filterable placeholder="请选择">
							    <el-option
							      v-for="item in typeOption"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							</el-select>
				      	</template>
				    </el-table-column>
				    <el-table-column
				      prop="start_time"
				      label="开始录制时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="recorder_name"
				      label="设备名"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="size"
				      label="大小"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="5"
				      label="操作"
				      align="center"
				      width="130"
				      show-overflow-tooltip>
				      	<template slot-scope="scope">
                            <el-button @click="videoView(scope.row.play_url, scope.row.id)" type="text">预览</el-button>
		      	        	<el-button @click="approveVideo_confirm(scope.row)" type="text">批准</el-button>
		      	        	<el-button @click="deleteVideo_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
			      	    </template>
				    </el-table-column>
				</el-table>
				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>

        <el-dialog
            title="提示"
            :visible.sync="memoryVisible"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="400px">
            <div class="server-memory">
                <img src="./../../../../static/image/home/server.png">
                <span>服务器内存容量不足20%，请尽快清理内存。可清理视频、录制文件及回收站</span>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="memoryVisible = false">我知道了</el-button>
            </div>
        </el-dialog>

        <transition name="el-fade-in-linear">
            <div class="masking" :class="{ activeLive: isActive }">
                <div class="maskingBox">
                    <div class="masking_h">
                        <span>视频预览</span>
                        <i class="el-icon-close" @click="viewClose"></i>
                    </div>
                    <div class="masking_c">
                        <nativeVideo  v-if="showVideoPlayer" :playParam.sync="playParam" >
						</nativeVideo>
                        <!-- <video v-if="showVideoPlayer" class="review-video" style="width:100%; height:100%; object-fit:fill;" controls autoplay preload="auto" >
                            <source :src="playParam.play_url" />
                            您的浏览器不支持 HTML5 video 标签,建议下载最新版谷歌浏览器使用。
                        </video> -->
                    </div>
                </div>
            </div>
        </transition>							
	</div>
</template>

<script>
    // import videoAlertView from '../../public/videoAlertView'
    import nativeVideo from '../../public/nativeVideo';

  	export default {
	    data() {
		    return {
                recorder_id: undefined,
                memoryVisible: false, // 服务器内存提示
                recorderList: [],
				rowLen: 0,
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
		    	orgData:[],
               	orgParam:{
               		data_type:'manage_tree',
               		status:[1,2],
               		level_string:'<4'
	        	},
	        	orgDataProps:{
	        		value:'id',
	        		label:'name',
	        	},
		    	listData:[],
		    	listParam:{
		       		keyword: '',
		       		page_index:1,
		       		page_size:10,
				},
				keyword: '',
		        selected:[],
		      	total_number:0,
		      	teacherData:[],
		      	addForm:{},
		      	AddFormOrgGroup: [],
		      	teacherParam:{
					org_id:0,
					role_id:6,
					status:[1]
				},
				typeOption:[
			        {
			          value: 0,
			          label: '公开课'
			        },
			        // {
			        //   value: 1,
			        //   label: '微课'
			        // }
				],
			    isActive: true,
			    showVideoPlayer:false,
                playParam:{play_url:'',},
		    }
		   
		},
		created(){
			this.getList();
			this.getOrgData();
            this.getTeacher();
            this.getRecorderList();
            this.getMemory();
        
		},
		mounted(){

		},
		methods: {
            /**
             * 获取服务器内存容量
             */
            getMemory() {
            	let success = (res => {
                    let _name = +res.data[6].split('%')[0];

                    if (_name >= 80) {
                        this.memoryVisible = true;
                    }
            	})
            	let fail = (res => {})
            
            	this.$ajax.get('api/system/system_info', {func: {success: success, fail: fail}})
            },
            getRecorderList(){
            	let success = (res => {
            		this.recorderList = res.data;
                })
                let params = {

                }
                
            	this.$ajax.get('api/recorder/recorder_list',{params, func:{success: success}})
            },
			searchFunc(){
				this.listParam.keyword = this.keyword;
				this.listParam.page_index = 1;
				this.getList();
			},
			reset() {
                this.keyword = '';
                this.recorder_id = undefined;
				this.listParam = {
					keyword: '',
		       		page_index:1,
		       		page_size:10,
				}
				this.getList();
			},
			viewClose(){
				this.showVideoPlayer = false;
				this.isActive = true
		
			},
			videoView(url){
                this.playParam.play_url = url;
				this.showVideoPlayer = true;
				this.isActive = false
			},
			approveVideo_confirm(obj){
				if(!obj.approveData.teacher_id || is_empty(obj.approveData.teacher_id) ){
					this.$message.warning('请选择主讲人');
					return false;
				}
				if( obj.orgGroup.length < 3 ){
					this.$message.warning('请选择正确的组织架构');
					return false;
				}
				if( parseInt( obj.approveData.is_nice ) !== 0 && parseInt( obj.approveData.is_nice ) !== 1  ){
					this.$message.warning('请选择视频信息');
					return false;
				}
				let yes = ( data => {
					obj.approveData.study_section_id = obj.orgGroup[1];
					obj.approveData.grade_id = is_empty(obj.orgGroup[2])?0:obj.orgGroup[2];
					this.approveVideo(obj.approveData);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定批准通过 '+obj.name+' 吗？'});
			},	
			approveVideo(params){
				this.loading.txt = '正在审核...';
				this.loading.status = true;
				let success = ( data => {
					this.loading.status = false;
		    		this.$message.success(data.msg)
					this.getList();
				});
				let fail = ( data => {
            		this.loading.status = false
            		this.$message.error(data.msg)
                })
                
		    	this.$ajax.post('api/video/recorded_tv713a',params,{func:{success:success,fail:fail}})
			},
			getTeacher(){
				let success = ( data=>{
            		this.teacherData = data.data;
            	})
            	this.$ajax.get('api/user/user',{params: this.teacherParam,func:{success:success}})
			},
			getOrgData(){
				// 重写成功回调
				let success = (res => {
					!is_empty(res.data) && res.data.forEach(item1 => {
                        let data1 = item1.children;

                        !is_empty(data1) && data1.forEach(item2 => {
                            let data2 = item2.children;

                            !is_empty(data2) && data2.forEach(item3 => {
                                item3.children = null;
                            })
                        })
                    })

                    this.orgData = res.data;
				});
	
  				this.$ajax.get('api/org/org',{params:this.orgParam,func:{success:success}})
		    },
			getType(val){
				return this.cutType[parseInt(val)]
			},
			getMirco(val){
				return this.isMirco[parseInt(val)]
			},
			getList(){
				this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.listData = data.data.data;
            		
            		for (var i = this.listData.length - 1; i >= 0; i--) {
                        let _temp = this.listData[i].approveData;
                        this.listData[i].orgGroup=[1];

                        _temp.study_section_id && this.listData[i].orgGroup.push(_temp.study_section_id);
                        _temp.grade_id && this.listData[i].orgGroup.push(_temp.grade_id);
                        
                        if (_temp.teacher_id == 0) {
                            _temp.teacher_id = null;
                        }
                    }
                    
            		this.total_number = data.data.data_sum;
            	})
            	let fail = ( data => {
            		this.loading.status = false
            		this.$message.error(data.msg)
                })
                this.listParam.recorder_id = this.recorder_id;
                
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/video/recorded_tv713a',{params: this.listParam,func:{success:success,fail:fail}})
            },
            //选中
		    tableSelectionChange(val) {
                this.selected = val;
            },
		    handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		    deleteVideo(id){
		    	let success = ( data => {
					this.$message.success(data.msg);
					
					if (this.listData.length - this.rowLen === 0) {
						if (this.listParam.page_index > 1) {
							this.listParam.page_index-- ;
						} else {
							this.listParam.page_index = 1;
						}
					}

					this.getList();
                });
              
		    	this.$ajax.delete('api/video/recorded_tv713a',{params:{id},func:{success:success}})
		    },
		    deleteVideo_confirm(obj){
				let yes = ( data => {
					this.rowLen = 1;
					this.deleteVideo(obj.id);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});

			},
			deleteMuiltVideo_confirm(){
				if( this.selected.length === 0 ) {
					this.$message.warning("请选择要删除的项");
					return false;
				}
				let yes = ( data => {
					this.rowLen = this.selected.length;
					this.muilDeleteVideo();
				})
				let cancel = ( data => {})

				this.e_confirm({yes:yes,cancel:cancel,txt:'确定要删除选中的项吗？'});
			},
			muilDeleteVideo(){
				var ids = [];
				for (var i = this.selected.length - 1; i >= 0; i--) {
					ids.push(this.selected[i].id)
				}
				this.deleteVideo(ids);
			},
			changePanel(panel){
                if (panel === 'multi') {
                    this.$router.push("/resources/video/video-review-multi")
                } else {
                    this.$router.push("/resources/video/video-review")
                }
			},
			showplayBox(obj){
				this.videoView(obj.play_url);
			}
		},
		components: {
             // videoAlertView
             nativeVideo
		}
		
  	}
</script>
<style lang="scss">
	.zh-video-review-multi {
		// .el-table__body-wrapper table tbody {
		// 	td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(9) {
		// 		padding: 0;
		// 	}
		// }

        .server-memory {
            display: flex;
            align-items: center;
            flex-direction: column;
            margin: 25px 0 45px;

            >img {
                margin-bottom: 25px;
            }
        }

        .el-input--small .el-input__inner {
            height: auto !important;
        }
	}

	.play-list-dialog {
		.el-table__body tbody tr td .cell div:hover {
			    text-decoration: underline;
			    cursor: pointer;
		};
		.el-dialog__body{
			padding: 30px 30px 38px;
		}
	}
	.masking{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: .5s;
		background: rgba(0,0,0,.3);
		z-index: 9999;
		.maskingBox{
			position: absolute;
			top: 20%;
			left: 50%;
			width: 800px;
			margin-left: -400px;
			background: #fff;
		}
		 .masking_h{
		 	padding: 10px 15px;
		 	background: #348EFC;
		 	text-align: center;
		 	text-align-last: justify;
		 	>span,
		 	>i{
		 		font-size: 16px;
		 		text-align-last: initial;
		 		display: inline-block;
		 		vertical-align: middle;
		 		color: #fff;
		 	}
		 	>i{
		 		cursor: pointer;
		 	}
		 }
		 .masking_c{
		 	padding: 30px;
		 }
        .rewview-tips{
            text-align: center;
            padding: 50px 0 60px;
        }
	}

	.activeLive{
		opacity: 0;
		visibility: hidden;
	}
</style>